<template>
  <div class="mod-home">
    <PanelGroup :visitLen="visitLen" :supplyLen="supplyLen" 
    :userLen="userLen"
    :articleLen='articleLen'/>
    <LineChart :visitSeries="visitSeries" />
    <ArticleTable :article='article'/>
  </div>
</template>

<script>
import PanelGroup from './component/PanelGroup.vue'
import LineChart from './component/LineChart.vue'
import ArticleTable from './component/ArticleTable.vue'
import { getVisitorList, getSupplyList,getArticleList,getUserList } from '@api/admin'

export default {
  components: {
    PanelGroup,
    ArticleTable,
    LineChart
  },
  data() {
    return {
      visitSeries: [],
      visitLen: 0,
      articleLen: 0,
      supplyLen: 0,
      userLen: 0,
      article:[]
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      getVisitorList({
        page: 1,
        limit: 500
      }).then(res => {
        if (res.data.code == 0) {
          const { list } = res.data.page
          var weekList = [0, 0, 0, 0, 0, 0, 0]
          list.map(v => {
            let today = new Date(v.visitTime).getDay()
            weekList[today] += 1
          })
          this.visitSeries = weekList
          this.visitLen = list.length
          console.log(this.visitSeries)
        }
      })

      getSupplyList({ page: 1, limit: 500 }).then(res => {
        catchLen(res, 'supplyLen')
      })
      getArticleList({ page: 1, limit: 500 }).then(res => {
        catchLen(res, 'articleLen')
        this.article = res.data.page.list
      })
      getUserList({ page: 1, limit: 500 }).then(res => {
        catchLen(res, 'userLen')
      })

      const catchLen = (res, name) => {
        if (res.data.code == 0) {
          const { list } = res.data.page
          this[name] = list.length
        }
        console.log(this.supplyLen)
      }
    }
  }
}
</script>

<style>
.mod-home {
  line-height: 1.5;
}
</style>
